<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQ斜角渐变图片列表 - 站长图库</title>	
<link href = "css/gs.css"    media = "screen" rel = "stylesheet" type = "text/css" />
<link href = "css/zzsc.css" media = "screen" rel = "stylesheet" type = "text/css" />
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
	<script type = "text/javascript" src = "js/jquery.diagonalFade.js"></script>
	<script type = "text/javascript">
		//<![CDATA[

			// Automates the diagonalFade effect
			function slideshow(selector, _f) {

				var x = parseInt(Math.random() * 2); // left-right
				var y = parseInt(Math.random() * 2); // top-bototm
				var f = _f; // fade out || fade in

				if(x > 0) x = 'left-right';
				else      x = 'right-left';

				if(y > 0) y = 'top-bottom';
				else      y = 'bottom-top';

				var s = 'out';

				if(f) {
					s = 'in';
					f = false;
				} else {
					s = 'out';
					f = true;
				}

				$(selector).diagonalFade({
					time: 100,
					fadeDirection_x: x,
					fadeDirection_y: y,
					fade: s,
					complete: function() {
						slideshow(selector, f);
					}
				});
			}

			$(function() {

				// select our containers and execute the slideshow
				slideshow("#image_cascade", false);
				slideshow("#text_cascade", false);
			});


		//]]>
	</script>
</head>

<body>
	<div id = "image_cascade" class = "container_9">		
		<img src = "images/1.jpg"  height = "125" class = "grid_1" alt = "Shoes" />
		<img src = "images/2.jpg"  height = "125" class = "grid_1" alt = "Shoes" />
		<img src = "images/3.jpg"  height = "125" class = "grid_1" alt = "Shoes" />
		<img src = "images/4.jpg"  height = "125" class = "grid_1" alt = "Shoes" />
		<img src = "images/5.jpg"  height = "125" class = "grid_1" alt = "Shoes" />
		<img src = "images/6.jpg"  height = "125" class = "grid_1" alt = "Shoes" />
		<img src = "images/7.jpg"  height = "125" class = "grid_1" alt = "Shoes" />
		<img src = "images/8.jpg"  height = "125" class = "grid_1" alt = "Shoes" />
		<img src = "images/9.jpg"  height = "125" class = "grid_1" alt = "Shoes" />
		<img src = "images/10.jpg" height = "125" class = "grid_1" alt = "Shoes" />
		<img src = "images/11.jpg" height = "125" class = "grid_1" alt = "Shoes" />
		<img src = "images/12.jpg" height = "125" class = "grid_1" alt = "Shoes" />
		<img src = "images/13.jpg" height = "125" class = "grid_1" alt = "Shoes" />
		<img src = "images/14.jpg" height = "125" class = "grid_1" alt = "Shoes" />
		<img src = "images/15.jpg" height = "125" class = "grid_1" alt = "Shoes" />
		<img src = "images/16.jpg" height = "125" class = "grid_1" alt = "Shoes" />
		<img src = "images/17.jpg" height = "125" class = "grid_1" alt = "Shoes" />
		<img src = "images/18.jpg" height = "125" class = "grid_1" alt = "Shoes" />
		<img src = "images/19.jpg" height = "125" class = "grid_1" alt = "Shoes" />
		<img src = "images/20.jpg" height = "125" class = "grid_1" alt = "Shoes" />
		<img src = "images/21.jpg" height = "125" class = "grid_1" alt = "Shoes" />
		<img src = "images/22.jpg" height = "125" class = "grid_1" alt = "Shoes" />
		<img src = "images/23.jpg" height = "125" class = "grid_1" alt = "Shoes" />
		<img src = "images/24.jpg" height = "125" class = "grid_1" alt = "Shoes" />
		<img src = "images/25.jpg" height = "125" class = "grid_1" alt = "Shoes" />
		<img src = "images/26.jpg" height = "125" class = "grid_1" alt = "Shoes" />
		<img src = "images/27.jpg" height = "125" class = "grid_1" alt = "Shoes" />
		<img src = "images/28.jpg" height = "125" class = "grid_1" alt = "Shoes" />
		<img src = "images/29.jpg" height = "125" class = "grid_1" alt = "Shoes" />
		<img src = "images/30.jpg" height = "125" class = "grid_1" alt = "Shoes" />
		<img src = "images/31.jpg" height = "125" class = "grid_1" alt = "Shoes" />
		<img src = "images/32.jpg" height = "125" class = "grid_1" alt = "Shoes" />
		<img src = "images/33.jpg" height = "125" class = "grid_1" alt = "Shoes" />
		<img src = "images/34.jpg" height = "125" class = "grid_1" alt = "Shoes" />
		<img src = "images/35.jpg" height = "125" class = "grid_1" alt = "Shoes" />
		<img src = "images/36.jpg" height = "125" class = "grid_1" alt = "Shoes" />
		<div class = "clear"></div>
	</div>
	<div id = "text_cascade" class = "container_9">
		<div width = "100" class = "grid_1 character">A</div>
		<div width = "100" class = "grid_1 character">B</div>
		<div width = "100" class = "grid_1 character">C</div>
		<div width = "100" class = "grid_1 character">D</div>
		<div width = "100" class = "grid_1 character">E</div>
		<div width = "100" class = "grid_1 character">F</div>
		<div width = "100" class = "grid_1 character">G</div>
		<div width = "100" class = "grid_1 character">H</div>
		<div width = "100" class = "grid_1 character">I</div>
		<div width = "100" class = "grid_1 character">J</div>
		<div width = "100" class = "grid_1 character">K</div>
		<div width = "100" class = "grid_1 character">L</div>
		<div width = "100" class = "grid_1 character">M</div>
		<div width = "100" class = "grid_1 character">N</div>
		<div width = "100" class = "grid_1 character">O</div>
		<div width = "100" class = "grid_1 character">P</div>
		<div width = "100" class = "grid_1 character">Q</div>
		<div width = "100" class = "grid_1 character">R</div>
		<div width = "100" class = "grid_1 character">S</div>
		<div width = "100" class = "grid_1 character">T</div>
		<div width = "100" class = "grid_1 character">U</div>
		<div width = "100" class = "grid_1 character">V</div>
		<div width = "100" class = "grid_1 character">W</div>
		<div width = "100" class = "grid_1 character">X</div>
		<div width = "100" class = "grid_1 character">Y</div>
		<div width = "100" class = "grid_1 character">Z</div>
		<div width = "100" class = "grid_1 character">0</div>
		<div width = "100" class = "grid_1 character">1</div>
		<div width = "100" class = "grid_1 character">2</div>
		<div width = "100" class = "grid_1 character">3</div>
		<div width = "100" class = "grid_1 character">4</div>
		<div width = "100" class = "grid_1 character">5</div>
		<div width = "100" class = "grid_1 character">6</div>
		<div width = "100" class = "grid_1 character">7</div>
		<div width = "100" class = "grid_1 character">8</div>
		<div width = "100" class = "grid_1 character">9</div>
		<div width = "100" class = "clear"></div>
	</div>
<div style="text-align:center;clear:both">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>代码整理：<a href="http://www.zztuku.com" target="_blank">站长图库</a></p>
<script src='http://www.zztuku.com/plus/ad_js.php?aid=35' language='javascript'></script>
</div>
</body>
</html>
